<!--
 * @message: 菜单管理模块组件
-->
<template>
  <div id="menu-manage">
    <Form inline :label-colon="true">
      <FormItem label="菜单名称" :label-width="80">
        <Input v-model="params.displayName" placeholder="请输入菜单名称"/>
      </FormItem>
      <FormItem>
        <Button
          type="primary"
          @click="publicGetData"
          v-auth="'列表'"
          style="margin-right: 10px"
        >搜索</Button>
        <Button type="primary" @click="publicUpdateData" v-auth="'新增'">新增</Button>
      </FormItem>
    </Form>
    <Breadcrumb></Breadcrumb>
    <BaseTable
      ref="baseTable"
      :action="action.readMenuByPage"
      :columns="columns"
      :menu-code="menuCode"
      @handleRemove="publicRemoveData"
      @handleUpdate="publicUpdateData"
      @handleView="publicUpdateData"
    />
    <!--新增和编辑及查看弹出层-->
    <Drawer
      :title="viewParams.title"
      v-model="viewParams.flag"
      :width="35"
      draggable
      @on-visible-change="publicVisibleChange"
    >
      <MenuManageUpdate
        :type="type"
        :moduleId="id"
        :idName="idName"
        @closeView="publicCloseView"
       :key="isRefreshView"
        :topMenuList="topMenuList"
      />
    </Drawer>
  </div>
</template>

<script>
import { tableMixin } from '../../../mixin'
import API_KEY from '../../../api'
import columns from './menu-columns'
import { getMenuSelect } from '../../../api/modules/system/menu'
import { handleDataFormat } from '../../../utils/data'
export default {
  name: 'MenuManage',
  mixins: [tableMixin],
  data () {
    return {
      params: {
        displayName: ''
      },
      columns,
      id: '',
      idName: 'id',
      menuCode: 'system-menu',
      suffix: '菜单信息',
      topMenuList: [],
      action: {
        readMenuByPage: API_KEY.menu.readMenuByPage,
        // 根据关键字删除接口（如果使用混入，属性名不能变,存放位置不能变）
        removeDataByKey: API_KEY.menu.crudMenu
      }
    }
  },
  mounted () {
    getMenuSelect().then(({ data }) => {
      const map = {
        label: 'menuName',
        value: 'id',
        children: 'children'
      }
      this.topMenuList = handleDataFormat(data, map)
    })
  },
  components: {
    MenuManageUpdate: () => import('./MenuManageUpdate')
  }
}
</script>

<style scoped>

</style>
